<template>
  <div class="contain">
    <div>
      <!-- 查询 -->
      <el-row style="margin: 15px;">
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVOName" clearable placeholder="请输入追溯码" @clear="resetInputFields" />
        </el-col>
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVYear" clearable placeholder="请输入订单号" @clear="resetInputFields" />
        </el-col>
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVRNumber" clearable placeholder="请输入库位号" @clear="resetInputFields" />
        </el-col>
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVSUnit" clearable placeholder="请输入派送单位" @clear="resetInputFields" />
        </el-col>
        <el-col :span="2" style="margin-right: 0px">
          <el-button type="primary" icon="el-icon-search" @click="queryValidateForm">查询</el-button>
        </el-col>
        <el-col :span="1" style="margin-right: 0px">
          <el-button type="danger" icon="el-icon-search" @click="cancelValidateForm">取消</el-button>
        </el-col>
      </el-row>
    </div>
    <ul class="cards">
      <li class="card">
        <!-- 库房10 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房10</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card card_box">
        <!-- 库房11 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房11</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房1 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房1</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房2 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房2</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 3</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 43</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 43</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 440</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房3 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房3</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房4 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房4</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房5 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房5</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房6 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房6</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房7 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房7</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 库房9 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">库房9</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <!-- 后加 -->
      <li class="card">
        <!-- 特药库1 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">特药库1</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 特药库2 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">特药库2</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 精神药品库1 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">精神药品库1</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <li class="card">
        <!-- 精神药品库2 -->
        <div @click="openPopup">
          <div class="item-spacing">
            <h3 class="card__title" style="text-align: right;">精神药品库2</h3>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">库区位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">商品种类: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">可用货位: 123</span>
          </div>
          <div class="item-spacing">
            <span class="card_number" style="text-align: right; margin-top: 5px;">共有货位: 123</span>
          </div>
        </div>
      </li>
      <!-- 其他 -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    openPopup() {
      this.$router.push({ path: '/libraryExcess' }); // 跳转到库房超量页面
    }
  }
};
</script>

<style scoped>
/* 父级容器设置为70%宽度并居中 */
.contain {
  width: 100%;
  margin: 0 auto;
  /* background: pink; */
}

/* ul 样式设置为flex布局 */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  list-style-type: none;
}

/* 每个 card 的宽度计算为 16% (每行6个) 并添加适当的间隙 */
.card {
  flex: 0 1 calc(16.66% - 10px);
  /* 6个卡片，每个卡片占 16.66% 减去间隙 */
  margin: 7px;
  margin-top: 25px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-align: center;
  padding: 7px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-image: url('../../assets/index/cangku.png');
  background-size: 60% auto;
  background-repeat: no-repeat;
  background-position: left center;
}

/* 卡片的标题和数字样式 */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cards.card__title {
  text-align: right;
  display: block;
  color: #ffffffad;
  font-weight: 400;
  font-size: 16px;
}

.cards.card_number {
  text-align: right;
  display: block;
  color: #fff;
  font-weight: 400;
  line-height: normal;
  font-size: 14px;
  font-family: Arial;
}

/* 通用的间距控制类 */
.item-spacing {
  margin-top: 5px;
  margin-left: 140px;
}

/* 响应式设计：当屏幕宽度小于1200px时，每行显示4个卡片 */
@media (max-width: 1200px) {
  .card {
    flex: 0 1 calc(25% - 10px);
    /* 每行显示 4 个卡片 */
  }
}

/* 响应式设计：当屏幕-width小于768px时，每行显示3个卡片 */
@media (max-width: 768px) {
  .card {
    flex: 0 1 calc(33.33% - 10px);
    /* 每行显示 3 个卡片 */
  }
}

/* 响应式设计：当屏幕宽度小于576px时，每行显示2个卡片 */
@media (max-width: 576px) {
  .card {
    flex: 0 1 calc(50% - 10px);
    /* 每行显示 2 个卡片 */
  }
}

/* 响应式设计：当屏幕宽度小于400px时，每行显示1个卡片 */
@media (max-width: 400px) {
  .card {
    flex: 0 1 100%;
    /* 每行显示 1 个卡片 */
  }
}

/* 晃动动画定义 */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }
}

/* 为点击区域添加呼吸灯效果的边框 */
.card_box {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  animation: borderPulse 2s infinite;
  /* 呼吸灯效果 */
}

.card_li {
  animation: shake 2s infinite;
  /* 添加晃动动画 */
}

/* 呼吸灯效果定义 */
@keyframes borderPulse {
  0% {
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  }

  50% {
    border-color: rgba(255, 0, 0, 1);
    box-shadow: 0 0 45px rgba(255, 0, 0, 1);
  }

  100% {
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  }
}
</style>